<template>
	<v-dialog :show="show" maxHeight="80vh" @close="close">
		<view class="content">
			<template v-for="device in devices">
				<collapse class="model" :title="device | getTitle">
					<view class="uni-flex sensors">
						<template v-for="sensor in device.sensors">
							<sensor 
								class="sensor" 
								color="#fff" 
								:selected="sensor.selected" 
								border 
								:name="sensor.name" 
								@click="onClick(sensor)"
								></sensor>
						</template>
						<template v-for="sensor in getEmptyNumber(device.sensors)">
							<view class="empty"></view>
						</template>
					</view>
				</collapse>
			</template>
			<view class="uni-flex opration">
				<button class="button" type="default" @click.stop="back">返回</button>
				<button class="button" type="default" @click.stop="save">保存</button>
			</view>
		</view>
	</v-dialog>
</template>

<script>
	import sensor from './sensor.vue'
	import vDialog from '@/components/dialog.vue'
	import collapse from '@/components/collapse.vue'
	export default {
		data(){
			return {
				devices: [
					{
						id: 16071103,
						name: '设备1',
						sensors:[
							{
								name: '大气温度',
								index: 0,
								selected: true
							},
							{
								name: '大气湿度',
								index: 1,
								selected: false
							},
							{
								name: '大气压力',
								index: 2,
								selected: false
							}
						]
					},
					{
						id: 16071104,
						name: '设备2',
					},
				]
			}
		},
		methods:{
			close(){
				this.$emit('close')
			},
			getEmptyNumber(sensors){
				if(!sensors) return 0;
				return 4-sensors.length%4;
			},
			onClick(sensor){
				sensor.selected = !sensor.selected
				this.$emit('change')
			},
			save(){
				this.$emit("save", this.devices)
			},
			back(){
				this.$emit("back")
			}
		},
		filters:{
			getTitle(device){
				return `${device.name}(${device.id})`
			}
		},
		props:{
			show: Boolean
		},
		components:{
			vDialog,
			collapse,
			sensor
		}
	}
</script>

<style lang="scss" scoped>
.content{
	border-radius: 23.52rpx;
	background: #FFFFFF;
	overflow: hidden;
	
	.sensors{
		justify-content: space-around;
		background: #1d776b;
		align-items: center;
		flex-wrap: wrap;
		.sensor, .empty{
			margin: 11.76rpx 0;
			width: 20%;
		}
	}
	.opration{
		justify-content: space-around;
		margin: 37.64rpx 0;
		.button{
			font-size: 25.88rpx;
			font-weight: 400;
			letter-spacing: 0.2em;
			background: #1d776b;
			color: #FFFFFF;
			width: 188.23rpx;
			height: 56.47rpx;
		}
	}
}
</style>
